<template>
  <div class="login">
    <div class="loginBox">
      <img style="width: 530px; height: 650px;" src="@/assets/img/dlLeft.png" alt="">
      <div class="loginright">
        <div class="loginjs">
          <span v-for="item in loginsj" :key="item.id" class="yzm" :class="{ 'active': logino == item.id }"
            @click="logins(item.id)">{{ item.name }}</span>
        </div>
        <div class="loginshur1">
          <!-- 手机号码 -->
          <div class="phone">
            <img src="@/assets/img/dlLxr.png" style="width: 14px; height: 14px; margin-right: 6px" />
            <span class="tel">账号</span>
          </div>
          <!-- from表单 -->
          <el-form :model="form" :rules="rules" ref="ruleFormRef">
            <!--  -->
            <el-form-item prop="tel">
              <el-input v-model="form.tel" class="input_shuru" placeholder="请输入账号(手机号码)" />
            </el-form-item>

            <div class="phone" v-if="logino == '1'">
              <img src="@/assets/img/dlyzm.png" style="width: 14px; height: 14px; margin-right: 6px" />
              <span class="tel">验证码</span>
            </div>

            <el-form-item class="poDing" prop="code" v-if="logino == '1'">
              <el-input v-model="form.code" class="input_shuru" placeholder="请输入验证码" />
              <div class="inp_yzm" @click="countDown()">
                {{ content }}
              </div>
            </el-form-item>

            <div class="phone" v-if="logino == '2'">
              <img src="@/assets/img/dlmm.png" style="width: 14px; height: 14px; margin-right: 6px" />
              <span class="tel">密码</span>
            </div>
            <el-form-item prop="userpwd" v-if="logino == '2'">
              <el-input v-model="form.userpwd" class="input_shuru" placeholder="请填写密码" show-password />
            </el-form-item>

            <el-form-item v-if="logino == '1'">
              <el-button type="primary" @click="submitForm()" class="login_register"
                style="margin-top: 80px">登录/注册</el-button>
            </el-form-item>
            <el-form-item v-if="logino == '2'">
              <el-button type="primary" @click="submitForm1()" class="login_register"
                style="margin-top: 80px">登录</el-button>
            </el-form-item>
          </el-form>
          <div v-if="logino == '1'" style="text-align: center;">登录即代表您已同意遵守<a href="#">《六度标讯网会员服务协议》</a></div>
        </div>
        <div class="bq">版权所有：北京博瑞浩宇科技有限公司武汉分公司</div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { encrypt } from "@/utils/index";
import {
  getLogin,
  getLoginPassword,
  getCode,
} from "../../Api/login/login";
let logino = ref("1");
let loginsIndex = ref("");
const ruleFormRef = ref();
let loginsj = reactive([
  {
    id: '1',
    name: '验证码登录'
  },
  {
    id: '2',
    name: '账号登录'
  }
])

let form = reactive({
  tel: '',
  code: '',
  userpwd: ''
})


// 表单验证
const rules = reactive({
  tel: [
    { required: true, message: "请填写手机号", trigger: "blur" },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "手机号码格式不正确",
      trigger: "blur",
    },
  ],

  code: [{ required: true, message: "请填写验证码", trigger: "blur" }],

  account: [
    { required: true, message: "请填写手机号", trigger: "blur" },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "手机号码格式不正确",
      trigger: "blur",
    },
  ],

  userpwd: [{ required: true, message: "请填写密码", trigger: "blur" }],
});

const logins = (id) => {
  logino.value = id;
  loginsIndex.value = id;
}
// 验证码
const content = ref("发送验证码"); // 按钮里显示的内容
const totalTime = ref(60); //记录具体倒计时时间
const canClick = ref(true);
// 获取验证码
const countDown = () => {
  getCode(form).then((res) => {
    // console.log(res);
    if (res.data.code != 1) {
      ElMessage.error(res.data.msg);
      // 存加密token
      window.localStorage.setItem("token", encrypt(JSON.stringify(res.data.data)))
    } else {
      ElMessage({
        message: res.data.msg,
        type: "success",
      });
    }
  });
  if (!canClick.value) return;
  canClick.value = false;
  content.value = totalTime.value + "s后重新发送";
  let clock = window.setInterval(() => {
    totalTime.value--;
    content.value = totalTime.value + "s后重新发送";
    if (totalTime.value < 0) {
      window.clearInterval(clock);
      content.value = "重新发送验证码";
      totalTime.value = 60;
      canClick.value = true;
    }
  }, 1000);
};


// 密码登录确定
const submitForm1 = () => {
  getLoginPassword(form).then((res) => {
    console.log(res);
    if (res.data.code != 1) {
      ElMessage.error(res.data.msg);
    } else {
      ElMessage({
        message: res.data.msg,
        type: "success",
      });
      // 存加密token
      window.localStorage.setItem("token", encrypt(JSON.stringify(res.data.data)))
      // 跳转
      // router.push("/");
      // 清空表单
      ruleFormRef.value.resetFields();

      window.location.reload();
    }
  });
};

// 注册登录确定
const submitForm = () => {
  getLogin(form).then((res) => {
    console.log(res);
    if (res.data.code != 1) {
      ElMessage.error(res.data.msg);
    } else {
      ElMessage({
        message: res.data.msg,
        type: "success",
      });

      // 存加密token
      window.localStorage.setItem("token", encrypt(JSON.stringify(res.data.data)))

      // 清空表单
      ruleFormRef.value.resetFields();

    }
  });
};
</script>

<style lang="scss" scoped>
.bq {
  position: absolute;
  bottom: 15px;
  right: 130px;
  font-size: 12px;
  color: #ACACAC;
}

.active {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #f43107;
  font-size: 18px;
  font-weight: bold;
  color: #fff !important;
}

// 输入框
.input_shuru {
  width: 420px;
  margin-top: 20px;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-bottom: 1px solid #a9b1be !important;
  outline: none;
  font-size: 16px;
  padding-bottom: 10px;
}

input::-webkit-input-placeholder {
  color: #a9b1be;
}

// 验证码
.poDing {
  position: relative;
}

.inp_yzm {
  display: inline-block;
  color: #f43107;
  position: absolute;
  right: 45px;
  top: 20px;
  cursor: pointer;
}

.login_register {
  width: 420px;
  height: 50px;
  background: #f43107;
  opacity: 1;
  border-radius: 4px;
  border: 0;
}

.login {
  display: flex;
  justify-content: center;
  background-color: #FFF;

  .loginBox {
    display: flex;
    box-sizing: border-box;
    // width: 1060px;
    height: 650px;
    margin-top: 30px;
    border: 3px solid #F6F6F6;

    .loginright {
      position: relative;
      display: flex;
      flex: 1;
      flex-direction: column;

      .loginjs {
        display: flex;
        align-items: center;
        align-self: center;
        width: 260px;
        height: 40px;
        margin-top: 100px;
        border-radius: 4px;
        border: 1px solid #F43107;

        .yzm {
          width: 130px;
          text-align: center;
          color: #333333;
        }
      }

      .loginshur1 {
        padding: 0 50px;

        // 手机号
        .phone {
          display: flex;
          align-items: center;
          margin-top: 20px;

          .tel {
            width: 56px;
            height: 14px;
            font-size: 14px;
            font-weight: 400;
            color: #333333;
          }
        }
      }
    }
  }
}

::v-deep .el-form-item.is-error .el-input__wrapper {
  box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
}

::v-deep .el-input__wrapper {
  outline: none;
  box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
  background-color: transparent;
}
</style>
